{% extends "dashboard/base.html" %}
{% load materializecss %}
{% load i18n %}
{% load mptt_tags %}
{% load staticfiles %}

{% block title %}
  {% if category.pk %}
    {{ category }}
  {% else %}
    {% trans "Add new category" context "Category detail page title" %}
  {% endif %} 
  - {% trans "Categories" context "Dashboard categories list" %} - {{ block.super }}
{% endblock %}

{% block body_class %}body-categories{% endblock %}

{% block menu_categories_class %}active{% endblock %}

{% block page_title %}
  {% if category.pk %}
    {{ category }}
  {% else %}
    {% trans "Add new category" context "Category detail page title" %}
  {% endif %}
{% endblock %}

{% block breadcrumbs %}
  <ul class="breadcrumbs breadcrumbs--history">
    <li>
      <a href="{% url 'dashboard:category-list'%}" class="breadcrumbs--ellipsed-item">
        {% trans "Categories" context "Dashboard categories list" %}
      </a>
    </li>
    <li class="back-mobile">
      <a href="{% url 'dashboard:category-list' %}" class="breadcrumbs--ellipsed-item"> 
        <svg data-src="{% static "dashboard/images/arrow-left.svg" %}" fill="#fff" width="20px" height="20px" />
      </a>
    </li>
    <li>
      {% if category.pk %}
        <span class="breadcrumbs--ellipsed-item">{{ category }}</span>
      {% else %}
        <span class="breadcrumbs--ellipsed-item">
          {% trans "Add new category" context "Category detail breadcrumbs" %}
        </span>
      {% endif %}
    </li>
  </ul>
{% endblock %}

{% block menu_catalogue_class %} active{% endblock %}

{% block content %}
  <div class="row">
    <div class="col m12 l9">
      <div class="card">
        <form method="post" id="form-category" enctype="multipart/form-data" novalidate>
          <div class="card-content">
            {% csrf_token %}
            <div class="row">
              {{ form.name|materializecss }}
            </div>
            <div class="row">
              <div class="col s12 m8">
                <div class="row">
                  {{ form.description|materializecss }}
                </div>
              </div>
              <div class="col s12 m4">
                <div class="row">
                  {{ form.hidden|materializecss:"input-field s12" }}
                </div>
              </div>
            </div>
          </div>
          <div class="card-action right-align">
            {% if category.parent %}
              <a href="{% url 'dashboard:category-list' root_pk=category.parent.pk %}" class="btn btn-flat">
                {% trans "Cancel" context "Dashboard cancel action" %}
              </a>
            {% else %}
              <a href="{% url 'dashboard:category-list' %}" class="btn btn-flat">
                {% trans "Cancel" context "Dashboard cancel action" %}
              </a>
            {% endif %}
            {% if category.pk %}
              <button type="submit" class="btn waves-effect waves-light">
                {% trans "Update" context "Dashboard update action" %}
              </button>
            {% else %}
              <button type="submit" class="btn waves-effect waves-light">
                {% trans "Create" context "Dashboard create action" %}
              </button>
            {% endif %}
          </div>
        </form>
      </div>
    </div>
    <div class="col m12 l3 help-box"></div>
  </div>
{% endblock %}
